<template>
  <div class="menu">
    <el-menu
      :background-color="menuOptions.background"
      :class="menuOptions.clazz"
      :active-text-color="menuOptions.activeColor"
      :text-color="menuOptions.color"
      :collapse="isCollapse"
      :unique-opened="true"
      :default-active="$route.path"
      :router="true">
      <template v-for="(item, index) in routers">
        <el-menu-item v-if="!item.hidden && item.children.length === 1" :index="item.path" :key="index">
          <i :class="[item.meta.icon]"></i>
          <span slot="title">{{ item.meta.name }}</span>
        </el-menu-item>
        <el-submenu v-else-if="!item.hidden" :index="item.path" :key="index">
          <template slot="title">
            <i :class="[item.meta.icon]"></i>
            <span slot="title">{{ item.meta.name }}</span>
          </template>
          <template v-for="(menu, index) in item.children">
            <el-menu-item v-if="!menu.hidden" :index="`${item.path}/${menu.path}`" :key="index">
              <i :class="[menu.meta.icon]"></i>
              <span>{{ menu.meta.name }}</span>
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { source2Target } from '../../utils'
import { syncRouterMap } from '../../router'

export default {
  name: 'index',
  data () {
    return {
      menuOptions: {
        background: '#191a23',
        clazz: '',
        activeColor: 'hsla(0,0%,100%,.7)',
        color: 'hsla(0,0%,100%,.7)'
      },
      routers: syncRouterMap
      // menus: [{}]
    }
  },
  methods: {
    setOptions (option) {
      source2Target(option, this.menuOptions, this.options)
    }
  },
  props: {
    options: Object,
    isCollapse: {
      type: Boolean,
      required: true
    }
  },
  created () {
    this.setOptions(this.options)
  }
}
</script>

<style scoped>
  .menu::-webkit-scrollbar {
    width: 0;
    height: 4px;
    background-color: #f8f8f8;
  }
  .el-menu{
    border: none;
  }
  .menu{
    height: calc(100% - 60px);
    overflow-y: auto;
  }
  .el-menu-item.is-active{
    background-color: #2d8cf0 !important;
  }
</style>
